<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('publicWorksTarget.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" label-width="120px" style="padding: 0 20px">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('publicWorksTarget.country')}}</div>
              <dict-select v-model="listQuery.country" code="country" :clearable="true" @change="setBg"></dict-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Category</div>
              <el-select clearable v-model="listQuery.bg" @change="changeBg" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in bgList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Account</div>
              <el-select clearable v-model="listQuery.bu" @change="changeBu" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in buList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Year</div>
              <dict-select v-model="listQuery.year" code="year" clearable></dict-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('publicWorksTarget.company')}}</div>
              <dict-select v-model="listQuery.company" code="company" :clearable="true"></dict-select>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 32px">
            <el-button class="yt-btn-ys" @click="getData" type="primary">{{$t('button.search')}}</el-button>
            <el-button class="yt-btn" @click="reset" type="primary">{{$t('button.reset')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list">
      <div class="list-content">
        <span>{{$t('publicWorksTarget.publicWorksTargetList')}}</span>
      </div>
      <div class="list-operation">
        <el-button class="yt-btn-ys"  @click="exportExcel" type="primary">{{$t('button.export')}}</el-button>
        <el-button class="yt-btn" type="primary" @click="setProportion = !setProportion">{{$t('publicWorksTarget.proportionHQ')}}</el-button>
      </div>

      <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" :span-method="objectSpanMethod" :row-style="changeCss" v-loading="loading" :element-loading-text="$t('publicWorksTarget.loading')" element-loading-spinner="el-icon-loading" max-height="650">
        <el-table-column align="center" :label="total.str ? 'total_' + total.str + '(NTD)' : 'total_'" fixed min-width="290">
          <el-table-column align="center" label="Area" prop="country" width="80"/>
          <el-table-column align="center" label="Category" prop="bg" width="80"/>
          <el-table-column align="center" label="Account" prop="bu" width="130">
            <template slot-scope="scope">
              <el-popover v-if="scope.row.isExchangeRate === '1'" trigger="manual" width="600" placement="bottom-start" v-model="scope.row.visible">
                <el-input v-model="scope.row.countryNo" :placeholder="$t('placeholder.content')" v-on:input ="queryExchangeRate(scope.row.countryNo)">
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-table :data="exchangeRateList" :empty-text="$t('placeholder.emptyText')" class="yt-table" style="width: 100%;margin-top: 20px" border>
                  <el-table-column type="index" align="center" :label="$t('businessObjectives.index')" width="60"/>
                  <el-table-column align="center" :label="$t('businessObjectives.buIsExchangeRate.countryName')" prop="countryName"/>
                  <el-table-column align="center" :label="$t('businessObjectives.buIsExchangeRate.rate')" prop="rate"/>
                  <el-table-column align="center" :label="$t('businessObjectives.buIsExchangeRate.operation')">
                    <template slot-scope="scopes">
                      <el-button size="mini" @click="selectExchangeRate(scope.$index,scopes.row)">{{$t('businessObjectives.buIsExchangeRate.select')}}</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div slot="reference" @click.stop="showPopover(scope.$index)" style="color: #6dcaa8;cursor: pointer;">{{scope.row.bu}}</div>
              </el-popover>
              <div v-else>{{scope.row.bu}}</div>
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 合約收入(前年度結轉) -->
        <el-table-column align="center" :label="total.lastYearIncome">
          <el-table-column align="center" :label="$t('publicWorksTarget.lastYearIncome')" prop="lastYearIncome" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.lastYearIncome}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <!-- 合約成本(前年度結轉) -->
        <el-table-column align="center" :label="total.lastYearCost">
          <el-table-column align="center" :label="$t('publicWorksTarget.lastYearCost')" prop="lastYearCost" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.lastYearCost}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <!-- 合約毛利(前年度結轉) -->
        <el-table-column align="center" :label="total.lastYearGrossProfit">
          <el-table-column align="center" :label="$t('publicWorksTarget.lastYearGrossProfit')" prop="lastYearGrossProfit" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.lastYearGrossProfit}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <!-- 合約收入(本年度新增) -->
        <el-table-column align="center" :label="total.thisYearIncome">
          <el-table-column align="center" :label="$t('publicWorksTarget.thisYearIncome')" prop="thisYearIncome" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.thisYearIncome}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <!-- 合約成本(本年度新增) -->
        <el-table-column align="center" :label="total.thisYearCost">
          <el-table-column align="center" :label="$t('publicWorksTarget.thisYearCost')" prop="thisYearCost" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.thisYearCost}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <!-- 合約毛利(本年度新增) -->
        <el-table-column align="center" :label="total.thisYearGrossProfit">
          <el-table-column align="center" :label="$t('publicWorksTarget.thisYearGrossProfit')" prop="thisYearGrossProfit" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.thisYearGrossProfit}}</div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" :label="total.recognizedIncome">
          <el-table-column align="center" :label="$t('publicWorksTarget.recognizedIncome')" prop="recognizedIncome" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.recognizedIncome}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.recognizedCost">
          <el-table-column align="center" :label="$t('publicWorksTarget.recognizedCost')" prop="recognizedCost" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.recognizedCost}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.recognizedGrossProfit">
          <el-table-column align="center" :label="$t('publicWorksTarget.recognizedGrossProfit')" prop="recognizedGrossProfit" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.recognizedGrossProfit}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.adminsCostSum">
          <el-table-column align="center" :label="$t('publicWorksTarget.adminsCostSum')" prop="adminsCostSum" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.adminsCostSum}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.yearOperateEstimatedGrossProfit">
          <el-table-column align="center" :label="$t('publicWorksTarget.yearOperateEstimatedGrossProfit')" prop="yearOperateEstimatedGrossProfit" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.yearOperateEstimatedGrossProfit}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.completedPercent ? total.completedPercent + '%' : total.completedPercent">
          <el-table-column align="center" :label="$t('publicWorksTarget.completedPercent')" prop="completedPercent" width="130">
            <template slot-scope="scope">
              <div>{{scope.row.completedPercent ? scope.row.completedPercent + '%' : scope.row.completedPercent}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.completedIncome">
          <el-table-column align="center" :label="$t('publicWorksTarget.completedIncome')" prop="completedIncome" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.completedIncome}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.completedCost">
          <el-table-column align="center" :label="$t('publicWorksTarget.completedCost')" prop="completedCost" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.completedCost}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.sumProjectHumanCost">
          <el-table-column align="center" :label="$t('publicWorksTarget.sumProjectHumanCost')" prop="sumProjectHumanCost" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.sumProjectHumanCost}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.sumManageHumanCost">
          <el-table-column align="center" :label="$t('publicWorksTarget.sumManageHumanCost')" prop="sumManageHumanCost" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.sumManageHumanCost}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.businessExpenses">
          <el-table-column align="center" :label="$t('publicWorksTarget.businessExpenses')" prop="businessExpenses" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.businessExpenses}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.managementCost">
          <el-table-column align="center" :label="$t('publicWorksTarget.managementCost')" prop="managementCost" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.managementCost}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.manageCostAmortization">
          <el-table-column align="center" :label="$t('publicWorksTarget.manageCostAmortization')" prop="manageCostAmortization" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.manageCostAmortization}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.amortization">
          <el-table-column align="center" :label="$t('publicWorksTarget.amortization')" prop="amortization" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.amortization}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.hqAmortization">
          <el-table-column align="center" :label="$t('publicWorksTarget.hqAmortization')" prop="hqAmortization" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.hqAmortization}}</div>
            </template>
          </el-table-column>
        </el-table-column>
         <el-table-column align="center" :label="total.abilityProjectCost">
          <el-table-column align="center" :label="$t('publicWorksTarget.abilityProjectCost')" prop="abilityProjectCost" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.abilityProjectCost}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.subtotal">
          <el-table-column align="center" :label="$t('publicWorksTarget.subtotal')" prop="subtotal" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.subtotal}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.completedBusinessGrossProfit">
          <el-table-column align="center" :label="$t('publicWorksTarget.completedBusinessGrossProfit')" prop="completedBusinessGrossProfit" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.completedBusinessGrossProfit}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.manageCostAmortization">
          <el-table-column align="center" :label="$t('publicWorksTarget.manageCostAmortization')" prop="manageCostAmortizations" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.manageCostAmortizations}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.hqAmortization">
          <el-table-column align="center" :label="$t('publicWorksTarget.hqAmortization')" prop="hqAmortizations" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.hqAmortizations}}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="total.completedBusinessGrossProfit">
          <el-table-column align="center" :label="$t('publicWorksTarget.completedBusinessGrossProfit')" prop="completedBusinessGrossProfits" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.completedBusinessGrossProfits}}</div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="$t('worksTargetEdit.setHQ.HQ')" :visible.sync="setProportion">
      <div class="list-operation">
        <!--新增-->
        <el-button class="yt-btn-ys" type="primary" @click="hqProportion">{{ $t('worksTargetEdit.setHQ.add') }}</el-button>
        <!--删除-->
        <el-button class="yt-btn" type="danger" style="margin-left:10px" @click="hqDelete">{{ $t('worksTargetEdit.setHQ.delete') }}</el-button>
      </div>
      <el-table :data="proportionList" :empty-text="$t('placeholder.emptyText')" class="yt-table" style="width: 100%;margin-top: 20px" border @selection-change="hqProportionChange">
        <el-table-column type="selection" align="center" class-name="pd" width="80"/>
        <el-table-column type="index" prop="sort" align="center" :label="$t('worksTargetEdit.setHQ.index')" width="80"/>
        <el-table-column align="center" :label="$t('worksTargetEdit.setHQ.country')">
          <template slot-scope="scope">
            <dict-select v-model="scope.row.country" code="country" clearable @change="selectCountryProportion(scope.$index,$event)"></dict-select>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('worksTargetEdit.setHQ.countryProportion')">
          <template slot-scope="scope">
            <el-input type="number" size="small" v-model="scope.row.setting">
              <i slot="suffix" style="display: inline-block;margin-top: 5px;padding-right: 8px">%</i>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button class="yt-btn" @click="setProportion = false">{{ $t('worksTargetEdit.setHQ.cancel') }}</el-button>
        <el-button class="yt-btn-ys" type="primary" @click="editorProportion">{{ $t('worksTargetEdit.setHQ.save') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getWorksTargetNowStatus, getWorksTargetExchangeRate, exportWorksTargetNowStatus } from '@/api/pmoReport/operationAnalysisForm';
  import { getByHq, saveCountrySetting } from '@/api/worksTarget/index';
  import { queryList } from '@/api/pmoReport/exchangeRate';
  import { selectBu, selectBg, listbgAndbu } from '@/api/bu/index';
  import { getBuAndBg } from '@/api/businessTarget/index';
  import dictSelect from '@/components/Dict/dictValueSelect';
  export default {
    name: 'publicWorksTarget',
    data() {
      return {
        dataGroupByBG: [],
        listMapAll: this.$store.getters.allMapDic,
        listQuery: {
          bg: '',
          bu: [],
          year: '',
          country: '',
          company: ''
        },
        loading: false,
        setProportion: false,
        proportionList: [],
        list: [],
        total: {},
        exchangeRateList: [],
        buList: [],
        bgList: [],
        selectionProportionList: [],
        areaArr: [], // 合并计算
        bgArr: [], // 合并计算
        sameRowArr: []
      };
    },
    mounted() {
      this.getQuery()
      this.changeBg(this.listQuery.bg)
      this.changeBu(this.listQuery.bu)
      getByHq().then(res => {
        if (res.data.length > 0) {
          this.proportionList = res.data
        }
      })
      if (this.listQuery.year !== '') {
        this.getData()
      }
    },
    components: { dictSelect },
    methods: {
      changeCss({ row }) {
        if (row.bu.indexOf('Subtotal') !== -1) {
          return 'background:#f0f2f5;color:#ff9900'
        }
      },
      getQuery() {
        const publicWorksTargetListQuery = window.sessionStorage.getItem('publicWorksTargetListQuery');
        if (publicWorksTargetListQuery) {
          this.listQuery = JSON.parse(publicWorksTargetListQuery);
        }
      },
      exportExcel() {
        // const a = document.createElement('a');
        // const href = exportWorksTargetNowStatus(this.list, this.$store.getters.info.id, this.listQuery.year);
        // a.download = Date.now();
        // a.href = href;
        // a.click();
        const obj = {
          createBy: this.$store.getters.info.id,
          year: this.listQuery.year,
          list: this.list,
          merge: this.bgArr
        }

        exportWorksTargetNowStatus(obj).then(res => {
          const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = this.$store.state.app.filename // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        })
      },
      // 点击显示汇率选择框
      showPopover(index) {
        this.$set(this.list[index], 'visible', true)
        this.queryExchangeRate('')
      },
      selectExchangeRate(index, rateRow) {
        const obj = {
          countryName: rateRow.countryName,
          rate: rateRow.rate,
          ...this.list[index - 1]
        }
        this.$set(this.list[index], 'visible', false)
        // 获得汇率计算后的结果
        getWorksTargetExchangeRate(obj).then(res => {
          // 给汇率栏位赋值
          this.$set(this.list, index, res.data)
        })
      },
      // 获得汇率
      queryExchangeRate(countryNo) {
        console.log(1)
        const obj = {
          country: countryNo,
          limit: '5'
        }
        queryList(obj).then(res => {
          this.exchangeRateList = res.data.data.rows
          this.exchangeRateList.forEach(v => {
            v.countryName = this.$store.getters.allMapDic.country[v.country]
          })
        })
      },
      setBg(country) {
        this.listQuery.bu = ''
        this.listQuery.bg = ''
        if (country) {
          getBuAndBg(country, '').then(res => {
            this.bgList = res.data.bgList;
            this.buList = res.data.buList;
          });
        } else {
          this.getBu()
          this.getBg()
        }
      },
      getBu() {
        selectBu().then(res => {
          this.buList = res.data;
        });
      },
      getBg() {
        selectBg().then(res => {
          this.bgList = res.data;
        });
      },
      changeBu(val) {
        // 联动bg
        if (val === '') {
          this.getBg()
        } else {
          listbgAndbu({ bu: val, bg: '' }).then(res => {
            this.bgList = res.data;
          });
        }
      },
      changeBg(val) {
        // 联动bu
        if (val === '') {
          this.getBu()
        } else {
          listbgAndbu({ bu: '', bg: val }).then(res => {
            this.buList = res.data;
          });
        }
      },
      hqProportionChange(val) {
        this.selectionProportionList = val
      },
      // 新增HQ占比
      hqProportion() {
        this.proportionList.push({
          country: '',
          setting: null
        })
      },
      // 国别占比
      selectCountryProportion(index, val) {
        this.$set(this.proportionList[index], 'country', val)
        const hash = {};
        for (const i in this.proportionList) {
          if (hash[this.proportionList[i].country]) {
            this.$message.error(this.$t('worksTargetEdit.message.countryCanNotRepeat'));
            this.$set(this.proportionList[index], 'country', '')
            return false
          } else {
            hash[this.proportionList[i].country] = this.proportionList[i].country
          }
        }
      },
      // 国别占比删除
      hqDelete() {
        if (this.selectionProportionList.length <= 0) {
          this.$notify({ title: this.$t('worksTargetEdit.notify.beDefeated'), message: this.$t('worksTargetEdit.notify.message1'), type: 'warning' });
          return
        }
        for (let y = 0; y < this.proportionList.length; y++) {
          this.proportionList[y].listIndex = y;
        }
        this.selectionProportionList.forEach(x => {
          this.proportionList.splice(
            this.proportionList.findIndex(item => item.listIndex === x.listIndex),
            1
          );
        });
      },
      // 保存HQ占比设置
      editorProportion() {
        let sum = null
        for (let i = 0; i < this.proportionList.length; i++) {
          sum += Number(this.proportionList[i].setting)
          if (this.proportionList[i].country === '') {
            this.$notify({ title: this.$t('worksTargetEdit.notify.beDefeated'), message: this.$t('worksTargetEdit.notify.message2'), type: 'warning' });
            return
          }
        }
        if (sum > 100 || sum < 100) {
          this.$notify({ title: this.$t('worksTargetEdit.notify.beDefeated'), message: this.$t('worksTargetEdit.notify.message3'), type: 'warning' });
          return
        }
        window.sessionStorage.setItem('proportionList', JSON.stringify(this.proportionList));
        // 保存HQ国别占比
        saveCountrySetting({ list: this.proportionList }).then(res => {
          if (res.status === 200) {
            // 返回保存之后的数据(带id)
            this.proportionList = res.data
            this.setProportion = false
          } else if (res.message) {
            this.$message.error(res.message);
          }
        })
      },
      // 合并单元格
      objectSpanMethod({ rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const _row = this.areaArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        if (columnIndex === 1 || columnIndex === 27 || columnIndex === 28 || columnIndex === 29) {
          const _row = this.bgArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
      mergeCol() {
        this.areaArr = []
        this.bgArr = []
        // 计算需要合并列的单元格
        const _this = this
        let contactDot = 0
        let contactBg = 0

        _this.list.forEach((row, index) => {
          row.index = index
          if (index === 0) {
            _this.areaArr.push(1)
          } else {
            // if (!row.country) {
            //   row.country = record
            // }
            if (row.country === _this.list[index - 1].country && row.country !== '') {
              // record = row.country
              _this.areaArr[contactDot] += 1
              _this.areaArr.push(0)
            } else {
              // record = row.country
              _this.areaArr.push(1)
              contactDot = index
            }
          }
          if (index === 0) {
            this.bgArr.push(1)
          } else {
            if (row.country === _this.list[index - 1].country && row.bg === this.list[index - 1].bg && row.bg) {
              this.bgArr[contactBg] += 1
              this.bgArr.push(0)
            } else {
              this.bgArr.push(1)
              contactBg = index
            }
          }
        })

        console.log('bgArr', this.bgArr)
        console.log('areaArr', _this.areaArr)
      },
      reset() {
        this.listQuery = {}
      },
      getData() {
        const _this = this
        this.loading = true
        let str = ''
        let sum = 0
        return new Promise(resolve => {
          getWorksTargetNowStatus(this.listQuery).then(res => {
            this.loading = false
            if (res.status === 200) {
              this.list = res.data.data
              this.total = res.data.total
              Object.keys(this.total).forEach(key => {
                this.total[key] = String(this.total[key]).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
              })
              this.list.forEach((row, i) => {
                this.list[i].country = _this.listMapAll.country[this.list[i].country];
                if (row.country && str.indexOf(row.country) === -1) {
                  sum += 1
                  str = str + (sum > 1 ? '+' + row.country : row.country)
                }
              })
              this.total.str = str
              this.mergeCol()
              this.dataGroupByBG = res.data.dataGroupByBG
              if (this.dataGroupByBG.length > 0 && this.list.length > 0) {
                this.dataGroupByBG.forEach(v => {
                  for (let i = 0; i < this.list.length; i++) {
                    if (v.bg === this.list[i].bg) {
                      this.list[i].manageCostAmortizations = v.manageCostAmortization
                      this.list[i].hqAmortizations = v.hqAmortization
                      this.list[i].completedBusinessGrossProfits = v.completedBusinessGrossProfit
                      break
                    }
                  }
                })
              }
            } else if (res.message) {
              this.$message.error(res.message);
            }
          })
          resolve();
        })
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('publicWorksTargetListQuery', JSON.stringify(this.listQuery))
    }
  };
</script>
<style scoped lang="scss">
  .row_class{
    background: #ff6700;
  }
</style>
